<template>
	<div>
		<div class="data-overview justify-content-center">
			<div class="title align-item-center">
				<span class="fs28 color161D2E">数据总览</span>
				<div class="btn justify-content-center" @click="getListData(1)">
					<img class="refresh" src="../assets/images/icon-refresh.png">
					<span class="fs18 color505971">刷新</span>
				</div>
			</div>
			<span class="fs18 color505971">数据更新时间：{{refreshTime}}</span>
		</div>
		<div class="operation justify-content-between">
			<div class="tabs flex">
				<div v-for="(item, index) in tabsData" class="tab" :class="item.selected ? 'active' : ''" @click="switchTab(index)">{{item.status}}<span>({{item.total}})</span></div>
			</div>
			<div class="align-item-center">
				<div class="add-btn justify-content-center" @click="showModel(1)">
					<img src="../assets/images/icon-add.png">
					<span class="fs22 colorFFF">新增任务</span>
				</div>
				<div class="sort-btn" :class="sortType == 1 ? 'active' : ''" @click="switchSortBtn(1)">
                    <img src="../assets/images/icon-sorta-1.png" v-if="sortType == 1">
					<img src="../assets/images/icon-sort-1.png" v-else>
				</div>
				<div class="sort-btn" :class="sortType == 2 ? 'active' : ''" @click="switchSortBtn(2)">
					<img src="../assets/images/icon-sorta-2.png" v-if="sortType == 2">
                    <img src="../assets/images/icon-sort-2.png" v-else>
				</div>
			</div>
		</div>
		<ShowPlate @showModel="showModel" @pageQuery="pageQuery" @pageSizeQuery="pageSizeQuery" v-loading="loading" :viewData="overviewData" :listData="overviewListData"></ShowPlate>
		<ModelAdd v-if="showAdd" :modelData="modelData" @cancel="cancelAdd"></ModelAdd>
        <ModelDel v-if="showDel" :modelId="delModelId" @cancel="cancelDel"></ModelDel>
        <FactoryNumber v-if="showFn" :id="delModelId" :modelName="modelName" @cancel="cancelFn"></FactoryNumber>
	</div>
</template>

<script>
import ShowPlate from '@/components/ShowPlate'
import ModelAdd from '@/components/ModelAdd'
import ModelDel from '@/components/ModelDel'
import FactoryNumber from "@/components/FactoryNumber";
import Bus from '@/assets/js/bus.js'
export default {
    name: 'Overview',
    components: {ShowPlate, ModelAdd, ModelDel, FactoryNumber},
    data () {
        return {
            iconMore: require("../assets/images/icon-more.png"),
            tabsData: [{
	            	status: '全部',
	            	total: 0,
	            	selected: true
	            }, {
	            	status: '已完成',
	            	total: 0,
	            	selected: false
	            }, {
	            	status: '进行中',
	            	total: 0,
	            	selected: false
	            }], //tab数据
	        sortType: 2, //列表排序方式
            refreshTime: '', //刷新时间
	        showAdd: false, //显示新增/修改弹窗
            showDel: false, //显示删除弹窗
	        modelData: {}, //编辑数据
            delModelId: '', //删除数据id
            keyWords: '', //搜索关键词
	        pageNum: 1, //总览列表页数
            pageSize: 5, //总览列表页码
            status: '', //tab状态 DOING进行中 COMPLETE已完成
            loading: false, //显示加载中动画
            overviewData: null, //总览数据
            overviewListData: [], //总览数据列表
            showFn: false,
            modelName: ''
        }
    },
    created() {
        let _this = this;
    	_this.getListData();
        _this.getNowTime();
        Bus.$on('search', (val) => {
            _this.keyWords = val;
            _this.getListData();
        });
        Bus.$on('refreshOverview', () => {
            _this.getListData(2);
        });
    },
    methods: {
    	/**
    	 * 点击切换tab
    	 * @param {Number} index - 所点击tab下标
    	 */
    	switchTab(index) {
    		this.tabsData.map((item) => {
    			item.selected = false;
    			return item;
    		});
    		let temp = this.tabsData[index];
    		temp.selected = true;
    		this.$set(this.tabsData, index, temp);
            this.pageNum = 1;
            if (index == 1) {
                this.status = 'COMPLETE';
            } else if (index == 2) {
                this.status = 'DOING';
            } else {
                this.status = '';
            }
            this.getListData()
    	},
    	/**
    	 * 点击切换列表展示风格
    	 * @param {Number} type - 所点击类型
    	 */
    	switchSortBtn(type) {
    		this.sortType = type;
    	},
        // 获取当前时间
        getNowTime() {
            let yy = new Date().getFullYear()
            let mm = new Date().getMonth() + 1
            let dd = new Date().getDate()
            let hh = new Date().getHours()
            let mf = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes()
            let ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds()
            let dateTime = yy + '年' + mm + '月' + dd + '日 ' + hh + ':' + mf
            this.refreshTime = dateTime
        },
    	/**
    	 * 显示新增/编辑/删除弹窗
         * @param {Number} type - 弹窗类型
    	 * @param {Object} row - 操作数据
    	 */
    	showModel(type, row) {
            if (type == 1) {
                this.modelData = row ? row : {};
                this.showAdd = true;
            } else if (type == 2) {
                this.showDel = true;
                this.delModelId = row.id;
            } else if (type == 3) {
                this.showFn = true;
                this.delModelId = row.id;
                this.modelName = row.modelName
            } else if (type == 4) {
                this.delModelId = row.id;
                this.exportPackage()
            }
    	},
        // 压缩包导出
        exportPackage() {
            let _this = this;
            let params = {
                deviceId: _this.delModelId
            }
            console.log(params)
            _this.loading = true;
            _this.axios.exportPackage(params).then((res) => {
                if (res.status == 200) {
                    let blob = new Blob([res.data]);
                    let disposition = res.headers['content-disposition'];
                    let fileName = disposition.substring(disposition.indexOf('Filename=') + 9, disposition.length);
                    console.log(fileName)
                    let linkNode = document.createElement('a');
                    linkNode.download = fileName;
                    linkNode.style.display = 'none';
                    linkNode.href = URL.createObjectURL(blob);
                    document.body.appendChild(linkNode);
                    linkNode.click();
                    URL.revokeObjectURL(linkNode.href);
                    document.body.removeChild(linkNode);
                }
                _this.loading = false;
            }).catch(function (error) {
            	_this.loading = false;
                _this.$message.error(error.msg);
            });
        },
        /**
         * 关闭型号弹窗
         * @param {Number} refresh - 是否刷新列表 1是
         */
    	cancelAdd(refresh) {
            if (refresh) this.getListData();
    		this.showAdd = false;
    	},
        /**
         * 关闭删除型号弹窗
         * @param {Number} refresh - 是否刷新列表 1是
         */
        cancelDel(refresh) {
            if (refresh == 1) this.getListData();
            this.showDel = false;
        },
        cancelFn() {
            this.showFn = false;
        },
        /**
         * 关闭编辑型号简介弹窗
         * @param {Number} refresh - 是否刷新列表 1是
         */
        cancelIntro(refresh) {
            if (refresh == 1) this.getListData();
            this.showIntro = false;
        },
        /**
         * 获取总览数据
         * @param {Number} refresh - 1点击刷新按钮
         */
    	getListData(refresh) {
            let _this = this;
            let params = {
                pageNum: _this.pageNum,
                pageSize: _this.pageSize,
                status: _this.status,
                keyWords: _this.keyWords
            };
            if (refresh == 1) _this.getNowTime();
            _this.tabsData.map((item, index) => {
                item.total = 0;
                return item;
            })
            _this.overviewListData = [];
            _this.loading = refresh == 2 ? false : true;
            _this.axios.overviewList(params).then((res) => {
                console.log(res)
                if (res.code == 200) {
                    _this.tabsData.map((item, index) => {
                        if (index == 0) {
                            item.total = res.data.allNum;
                        } else if (index == 1) {
                            item.total = res.data.compNum;
                        } else {
                            item.total = res.data.doingNum;
                        }
                        return item;
                    })
                    _this.overviewData = res.data.list;
                    _this.overviewListData = res.data.list.list.map((item, index) => {
                        item.iconMoreShow = _this.iconMore;
                        return item;
                    });
                }
                _this.loading = false;
            }).catch(function (error) {
                _this.loading = false;
                _this.$message.error(error.msg);
            });
        },
        /**
         * 分页请求
         * @param {Number} pageNum - 页数
         */
        pageQuery(pageNum) {
            this.pageNum = pageNum;
            this.getListData();
        },
        pageSizeQuery(pageSize) {
            this.pageSize = pageSize;
            this.getListData()
        }
    }
}
</script>

<style scoped lang='less'>
    @import url('../assets/css/public.css');
    .data-overview {width: 100%;height: 51rem;line-height: 51rem;position: relative;
		.title {position: absolute;left: 98rem;
			.btn {width: 84rem;height: 34rem;line-height: 34rem;text-align: center;margin-left: 20rem;border: 1px solid #D0D6E3;background: linear-gradient(0deg, #D8DCE7 0%, #FFFFFF 100%);border-radius: 3rem;cursor: pointer;
				.refresh {width: 19rem;height: 18rem;margin-right: 5rem;}
			}
		}
    }
    .operation {width: 100%;height: 58rem;background: #F4F5F8;border: 1px solid #D0D6E3;padding: 0 100rem;
		.tabs {height: 100%;
			.tab {min-width: 103rem;height: 100%;line-height: 58rem;text-align: center;position: relative;font-size: 24rem;color: #505971;margin-right: 50rem;cursor: pointer;}
			.tab.active {color: #161D2E;
				span {color: #285FE3;}
			}
			.tab.active:after {display: block;content: "";width: 103rem;height: 4rem;position: absolute;bottom: 0;left: 50%;transform: translate(-50%);background-color: #285FE3;}
		}
		.add-btn {width: 158rem;height: 40rem;background: linear-gradient(0deg, #01A96A 0%, #00C37A 100%);border-radius: 3rem;cursor: pointer;
			img {width: 23rem;height: 23rem;margin-right: 6rem;}
		}
		.sort-btn {width: 33rem;height: 33rem;margin-left: 11rem;border-radius: 3rem;border: 1px solid #D0D6E3;background: linear-gradient(0deg, #E9ECF4 0%, #FFFFFF 100%);display: flex;align-items: center;justify-content: center;cursor: pointer;
            img {width: 21rem;height: 21rem;}
        }
		.sort-btn.active {border: 1px solid #194ED0;background: #2A60E4;}
    }
</style>
